<template>
  <div class="history">
    <div class="list" v-if="!ifEdit">
      <el-row class="query-box">
        <el-form ref="form" :model="queryParams" label-width="80px">
          <el-form-item label="试验名称">
            <el-input v-model="queryParams.name"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="getList()" size="small"
          >查询</el-button
        >
      </el-row>
      <el-row>
        <el-table :data="tableData">
          <el-table-column prop="id" label="编号" width="80" align="center" />
          <el-table-column prop="name" label="试验名称" align="center" />
          <el-table-column prop="created_at" label="创建日期" align="center">
            <template #default="scope">
              <span>
                {{
                  scope.row.created_at ? getDateStr(scope.row.created_at) : ""
                }}</span
              >
            </template>
          </el-table-column>

          <el-table-column prop="type" label="炉型" align="center"
            ><template #default="scope">
              <span>
                {{
                  scope.row.burner
                    ? dataList.furnaceSize[Number(scope.row.burner)]
                    : ""
                }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="editFn(scope.row)"
                size="small"
                >编辑</el-button
              >
              <el-button
                link
                type="danger"
                size="small"
                @click="deleteRecord(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            v-model:page="queryParams.page"
            v-model:limit="queryParams.limit"
          ></el-pagination>
        </div>
      </el-row>
    </div>
    <div class="edit" v-if="ifEdit">
      <fire-info :getInfo="getInfo" @resetEdit="resetEditChange" />
    </div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { toRefs, onMounted, ref } from "vue";
import fireInfo from "../components/fireInfo.vue";
import { getRecords, deleteExpRecord } from "../http/records";
import { getDateStr } from "../utils/index.js";
import dataListStore from "../stores/dataList";
import { ElMessage } from "element-plus";
const dataList = dataListStore();
const data = reactive({
  form: {},
  tableData: [
    {
      name: "name呀",
      date: "2023-11-12 11:22:33",
      type: "四角切圆",
    },
    {
      name: "name呀",
      date: "2023-11-12 11:22:33",
      type: "四角切圆",
    },
    {
      name: "name呀",
      date: "2023-11-12 11:22:33",
      type: "四角切圆",
    },
    {
      name: "name呀",
      date: "2023-11-12 11:22:33",
      type: "四角切圆",
    },
    {
      name: "name呀",
      date: "2023-11-12 11:22:33",
      type: "四角切圆",
    },
    {
      name: "name呀",
      date: "2023-11-12 11:22:33",
      type: "八角切圆",
    },
  ],
  total: 100,
  pageSize: 15,
  currentPage: 1,
  ifEdit: false,
  queryParams: {
    name: "",
    page: 1,
    limit: 10,
  },
});
const getInfo = ref();
const { form, tableData, total, pageSize, currentPage, ifEdit, queryParams } =
  toRefs(data);

const getList = () => {
  getRecords(queryParams.value).then((response) => {
    if (response.status == "success") {
      console.log(response);

      tableData.value = response.records;
      total.value = response.total;
    }
  });
};

// 处理页面大小改变
function handleSizeChange(val) {
  queryParams.value.limit = val;
  pageSize.value = val;
  getList();
}

// 处理当前页改变
function handleCurrentChange(val) {
  queryParams.value.page = val;
  currentPage.value = val;
  getList();
}

// 编辑
function editFn(row) {
  getInfo.value = row;
  ifEdit.value = true;
}
function deleteRecord(row) {
  deleteExpRecord(row.id).then((response) => {
    if (response.status == "success") {
      ElMessage({
        message: "删除成功",
        type: "success",
        duration: 2 * 1000,
      });
      getList();
    } else {
      ElMessage({
        message: "删除失败",
        type: "success",
        duration: 2 * 1000,
      });
    }
  });
}
getList();
onMounted(() => {});
const resetEditChange = (value) =>{
  ifEdit.value = value;
}
</script>
<style lang="scss" scoped>
.history {
  height: 100%;
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(121, 135, 253, 0.05);
  border-radius: 16px;
  padding: 1vh 1vw 1vh 1vw;
  .query-box {
    display: flex;
    justify-content: space-between;
  }
  .pagination {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 20px 0 20px 0;
  }
  .edit {
    width: 100%;
    height: 100%;
  }
}
</style>
